import React, { useState, useEffect, useRef } from 'react';
// import './SpeechToText.css'; // 样式文件
import ChatInterface from '../../components/ChatInterface'
const SpeechToText = () => {
  const [isListening, setIsListening] = useState(false); // 是否正在监听语音
  const [transcript, setTranscript] = useState(''); // 存储识别出的文字
  const [isBrowserSupported, setIsBrowserSupported] = useState(true); // 浏览器是否支持语音识别
  const [error, setError] = useState(null); // 存储错误信息
  const recognitionRef = useRef(null); // 引用语音识别对象

  useEffect(() => {
    // 检查浏览器是否支持语音识别
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

    if (!SpeechRecognition) {
      setIsBrowserSupported(false);
      setError('您的浏览器不支持语音识别功能');
      return;
    }

    // 初始化语音识别对象
    const recognition = new SpeechRecognition();
    recognition.continuous = true; // 持续监听而不是单次
    recognition.interimResults = true; // 获取临时识别结果
    recognition.lang = 'zh-CN'; // 设置语言为中文

    // 处理识别结果事件
    recognition.onresult = (event) => {
      let interimTranscript = ''; // 临时结果
      let finalTranscript = ''; // 最终结果

      // 遍历所有识别结果
      for (let i = event.resultIndex; i < event.results.length; i++) {
        const transcript = event.results[i][0].transcript;
        if (event.results[i].isFinal) {
          finalTranscript += transcript;
        } else {
          interimTranscript += transcript;
        }
      }

      // 更新状态，只保留最终结果
      setTranscript(prev => prev + finalTranscript);
    };

    // 错误处理
    recognition.onerror = (event) => {
      console.error('语音识别错误:', event.error);
      setError(`识别错误: ${event.error}`);
      setIsListening(false);
    };

    // 识别结束时自动重新开始（如果仍在监听状态）
    recognition.onend = () => {
      if (isListening) {
        recognition.start();
      }
    };

    // 保存识别对象引用
    recognitionRef.current = recognition;

    // 清理函数：组件卸载时停止识别
    return () => {
      if (recognitionRef.current) {
        recognitionRef.current.stop();
      }
    };
  }, []); // 空依赖数组表示只在组件挂载时运行一次

  const toggleListening = async () => {
    setError(null); // 清除之前的错误

    if (!isBrowserSupported) return; // 浏览器不支持则直接返回

    if (isListening) {
      // 如果正在监听，则停止
      recognitionRef.current.stop();
      setIsListening(false);
    } else {
      try {
        // 检查是否在安全上下文中（HTTPS 或 localhost）
        if (!window.isSecureContext) {
          throw new Error('语音识别需要在HTTPS或localhost环境下运行');
        }

        // 请求麦克风权限
        await navigator.mediaDevices.getUserMedia({ audio: true });

        // 开始新的识别会话
        setTranscript(''); // 清空之前的文本
        recognitionRef.current.start();
        setIsListening(true);
      } catch (err) {
        console.error('启动语音识别失败:', err);
        setError(`无法启动语音识别: ${err.message}`);
        setIsListening(false);
      }
    }
  };

  const clearTranscript = () => {
    setTranscript(''); // 清空识别文本
    setError(null); // 清空错误信息
  };

  if (!isBrowserSupported) {
    return (
      <div className="unsupported-browser">
        <p>抱歉，您的浏览器不支持语音识别功能。</p>
        <p>请尝试使用最新版本的Chrome、Edge或Safari浏览器。</p>
      </div>
    );
  }

  return (
    <>
      <div className="speech-to-text-container">
        <h2>语音实时转文字</h2>

        {/* 显示识别结果的区域 */}
        <div className="transcript-box">
          {transcript || <span className="placeholder">点击"开始录音"按钮开始语音转文字...</span>}
        </div>

        {/* 错误信息显示 */}
        {error && <div className="error-message">{error}</div>}

        {/* 操作按钮组 */}
        <div className="button-group">
          <button
            onClick={toggleListening}
            className={isListening ? 'listening' : ''}
          >
            {isListening ? '停止录音' : '开始录音'}
          </button>

          <button
            onClick={clearTranscript}
            disabled={!transcript && !error}
          >
            清除内容
          </button>
        </div>

        {/* 监听状态指示器 */}
        {isListening && (
          <div className="status-indicator">
            <div className="pulse-animation"></div>
            <span>正在聆听中...</span>
          </div>
        )}

      </div>
      <div>
        <ChatInterface />
      </div>
    </>
  );
};

export default SpeechToText;